<!--
 * @Author: Hzh
 * @Date: 2021-04-23 09:57:53
 * @LastEditTime: 2021-04-23 12:27:21
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="about">
        <!-- 中屏 -->
        <div class="child_common TG_middle">
            <!-- <img src="../assets/GIS_middleBG.png" alt=""> -->
            <iframe id="middleURl" :src="middle_URl" frameborder="0"></iframe>
        </div>

    </div>
</template>

<script>
import Card from '../static/card.js'

export default {
    data() {
        return {
            // 中屏的iframeURL
            middle_URl: '',
        }
    },
    mounted() {
        this.middle_URl = Card.middle_URl
        // 接收并转发
        this.jieShou_postMEssage()
    },
    methods: {
        // main接收
        jieShou_postMEssage() {
            console.log('main')

            window.addEventListener('message', (event) => {
                // console.log(event)
                let e = event
                // console.log(event.data)
                let clientId = event.data.event.data.clientId
                let data = event.data.event.data
                console.log('main:', data)
                // 判断是否是8022发来的，如果是，就转发给指定id的标签
                if (clientId == 'ybgc_gateway') {
                    console.log('转发成功')
                    let middleURl = document.getElementById('middleURl').contentWindow
                    console.log('aaaaa:', middleURl)
                    console.log('eeeeeeeeeee:', e.data)
                    middleURl.postMessage(e.data, '*')
                }

            }, false)
        }
    }
}
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.about {
    width: 1856px;
    height: 896px;
    background-color: #000;

    // 下面的三屏
    .bottom {

        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 896px;
        padding-left: 28px;
        // background-color: yellowgreen;
    }

    // 三屏的公共样式
    .child_common {
        width: 1856px;
        height: 100%;
        // background-color: yellow;
    }

    //   中屏
    .TG_middle {
        background: url('../assets/GIS_middleBG.png') no-repeat;
        text-align: right;

    }



    iframe {
        width: 100%;
        height: 100%;

    }

}
</style>
